<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <script>
    function xhr(url, callback) {
        var xhr = new XMLHttpRequest()
        xhr.open("GET", url, true)
        xhr.onload = function (e) {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              callback(xhr.responseText)
            } else {
              callback(null)
            }
          }
        }
        xhr.onerror = function (e) {
          callback(null)
        }
        xhr.send(null)
    }

    function show(data) {
        document.getElementById("results").innerHTML = createHTMLForJson(data)
    }

	var word = "<!--WORD-->";

    function load() {
        var url = "http://fanyi.youdao.com/openapi.do?keyfrom=spotlightplugin&key=1323324025&type=data&doctype=json&version=1.1&q=" + word;
        xhr(url, function(response) {
            document.getElementById("loading").style.display = 'none'
            if (response) {
                show(JSON.parse(response))
                document.getElementById("results").style.display = 'block'
            } else {
                document.getElementById("error").style.display = 'block'
            }
        })
    }

    function createHTMLForJson(json) {
        console.log(json)

        var basicStr = ""
        if (json.basic) {
            var basic = json.basic.explains
            for (var i = 0; i < basic.length; i++) {
                basicStr += "<li>" + basic[i] + "</li>"
            }
            if (basicStr != "") {
                basicStr = "<div class='block'><h3>基础词典</h3><ul>" + basicStr + "</ul></div>"
            }
        }

        var webStr = ""
        if (json.web) {
            var web = json.web
            for (var i = 0; i < web.length; i++) {
                webStr += "<li>" + web[i].key + "<br>" + web[i].value.join("；")+ "</li>"
            }
            if (webStr != "") {
                webStr = "<div class='block'><h3>网络释义</h3><ul>" + webStr + "</ul></div>"
            }
        }

        return "<div><h1>" + json.query + "</h1>" + basicStr + webStr + "</div>"

    }

    load()
    </script>

   <style>

    * {
        padding: 0;
        margin: 0;
    }

    html, body, body > div {
        margin: 0;
        width: 100%%;
        height: 100%%;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial;
        line-height: 1.2;
    }

    h1, h2, h3, h4, h5 {
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "HiraginoSansGB-W6", "Hiragino Sans GB W6";
    }

    h1 {
        font-size: 32px;
        border-bottom: #ddd 1px solid;
        padding: 0px 0px 10px 0px;
        margin: 0px 0px 10px 0px;
        color: #444;
    }

    h3, li {
        font-size: 15px;
    }

    ul, li {
        list-style: none;
    }

    li {
        font-size: 15px;
        color: #666;
        padding-top: 5px;
    }

    div.content {
        padding: 15px;
    }

    div.block {
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: #eee 1px solid
    }


    #loading, #error {
        text-align: center;
    }
    #error, #results {
        display: none;
    }
    #results {
        text-align: left;
    }
</style>



</head>
<body>
    <div>
        <div class="content">
            <div id='loading'>
                Loading...
            </div>

            <div id='results'>
            </div>

            <div id='error'>
                Oops, failed to load result.
            </div>

        </div>
    </div>
</body>

</html>
